<template>
	<view class="container">

		<view class="uni-list iphonex">
			<view class="uni-list-cell uni-list-cell-pd"
				@click="getModelDetail(item.modelId, 'yearRight',item.modelFullName)" v-for="(item, index) in list"
				:key="index">
				<!-- <image mode="aspectFill" :src="item.modelImageUrl || '../../../static/images/pro_01.png'" class="pic"></image> -->
				<view class="uni-list-cell-db">
					<view class="tit">{{item.modelName}}</view>
					<!-- <view class="brdge">
						<view v-for="(itemn, indexn) in item.carYearArr" :key="indexn">
							<text>{{itemn}}</text>
						</view>
					</view> -->
				</view>
			</view>
			<uni-drawer ref="yearRight" :width="200" mode="right">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="info-content" @click="onSaleNameChange(cc)" v-for="cc in saleCC" :key="cc">
							<text>{{cc}}</text>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
			<uni-drawer ref="showRight" :width="200" mode="right">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="info-content" @click="goCarDetail(item)" v-for="item in saleNames" :key="item">
							<text>{{item}}</text>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>


<script>
	import {
		getBrandModel,
		getSaleNameByModelId,
		getCCByModelId
	} from '@/api/car.js';
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		data() {
			return {
				modelId: 0,
				title: '',
				saleCC: [],
				saleNames: [],
				selectSaleName: '',
				selectCC: '',
				brandId: 0,
				list: [],
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin'
			})
		},
		onLoad(option) {
			this.brandId = option.brandId || 0;
			let title = option.title || 0;
			if (!this.brandId) {
				return this.$util.Tips({
					title: '车系不存在'
				}, {
					tab: 3
				});
			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.getModel();
		},

		onShow() {

		},

		methods: {

			/**
			 * 获取车系
			 */
			getModel() {
				let that = this;

				getBrandModel({
					brandId: that.brandId,
				}).then(res => {
					that.list = res.value;
					console.log(res);
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},

			/**
			 * 跳转到车型详情
			 */
			getModelDetail(modelId, e, title) {
				this.saleNames = [];
				this.saleCC = [];
				let that = this;
				this.modelId = modelId;
				this.title = title;
				getCCByModelId({
					modelId: modelId
				}).then(res => {
					this.saleCC = res.value;
					this.$refs[e].open()
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			onSaleNameChange(cc) {
				this.selectCC = cc;
				getSaleNameByModelId({
					modelId: this.modelId,
					cc: cc
				}).then(res => {
					this.saleNames = res.value;
					if (this.saleNames.length === 0) {
						if (this.isLogin == false) {
							toLogin();
							return;
						}
						this.selectSaleName = '';
						this.$util.Tips('/pages/home/detail/index?modelId=' + this.modelId + '&saleName=' + this
							.selectSaleName + '&cc=' + this.selectCC + '&title=' + this.title)
					} else {
						this.$refs["showRight"].open();
					}
				})
			},
			goCarDetail(saleName) {
				if (this.isLogin == false) {
					toLogin();
					return;
				}
				this.selectSaleName = saleName;
				this.$util.Tips('/pages/home/detail/index?modelId=' + this.modelId + '&saleName=' + this.selectSaleName +
					'&cc=' + this.selectCC + '&title=' + this.title)
			}
		}
	}
</script>

<style>
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info-content {
		padding: 10px 15px;
		border-bottom: 1px solid #eaeaea;
		/* 添加下划线 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		transition: all 0.3s ease;
		/* 添加过渡效果 */
		cursor: pointer;
	}

	.container .pic {
		width: 278rpx;
		height: 168rpx;
		margin-right: 30rpx;
	}

	.container .tit {
		font-weight: bold;
		font-size: 30rpx;
		padding-bottom: 20rpx;
		line-height: 30rpx;
	}

	.container .brdge {
		display: flex;
		flex-wrap: wrap;
		margin: -6rpx -10rpx;
		font-size: 24rpx;
	}

	.container .brdge>view {
		/* width: 33.333%; */
		box-sizing: border-box;
		padding: 6rpx 10rpx;
		text-align: center;
	}

	.container .brdge text {
		display: block;
		background: #F3F3F3;
		border-radius: 26rpx;
		line-height: 51rpx;
		padding: 10rpx 15rpx;
	}

	.uni-list-cell {
		align-items: stretch;
	}
</style>